<!--
 * @Date: 2020-08-07 11:30:21
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-22 16:02:07
 * @Description: 二级按钮的容器管理二级按钮
-->
<template>
  <div class="bmp-second-menus-content" @click.stop v-if="currMenuInfos.length">
    <div class="bmp-second-menu-content" :style="{height:secondMenuBtnSBsContentHeight+'px'}">
      <div v-swiperSecond:swiperSecond="secondMenusSwiperOption" class="swiper-container">
        <div
          :class="currMenuInfos.length>secondMenusSwiperOption.slidesPerView?'swiper-wrapper':'swiper-wrapper  swiper-no-swiping'"
        >
          <div class="swiper-slide" :key="key" v-for="(item,key) in currMenuInfos">
            <bmpSecondMenu v-bind="item" ref="secondMenuBtns" v-model="item.selected"></bmpSecondMenu>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { directive } from 'vue-awesome-swiper'
import bmpSecondMenu from './bmpSecondMenu.vue'

export default {
  data () {
    return {
      // 容器的高度
      secondMenuBtnSBsContentHeight: 0,
      currMenuInfos: []
    }
  },
  model: {
    prop: 'selected',
    event: 'refreshSelectStatus'
  },
  inject: ['secondMenusSwiperOption'],
  components: {
    bmpSecondMenu
  },
  directives: {
    swiperSecond: directive
  },
  props: {
    menuInfos: {
      type: Array,
      default: function () {
        return []
      }
    },
    selected: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    menuInfos: {
      handler: function (val) {
        if (Array.isArray(val) && Array.from(new Set(val.map(ele => ele.tag))).length === val.length) {
          this.currMenuInfos = val
        } else {
          console.error('二级菜单存在重复标识')
          this.currMenuInfos = []
        }
      },
      deep: true,
      immediate: true
    },
    // 向上提供是否存在选中的状态
    currMenuInfos: {
      handler (nv) {
        let type = false
        const index = nv.findIndex(ele => ele.selected)
        if (index !== -1) {
          type = true
        }
        this.$emit('refreshSelectStatus', type)
      },
      deep: true,
      immediate: true
    },
    selected: {
      handler (nv) {
        if (!nv) {
          this.togSelectAll(nv)
        }
      },
      immediate: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.cumputedHeight()
      console.log('222', this.currMenuInfos)
    })
  },

  methods: {
    // 计算宽高的 如果需要扩展 自适应这里需要修改
    cumputedHeight () {
      const maxP = this.secondMenusSwiperOption.slidesPerView
      const length = this.menuInfos.length > maxP ? maxP : this.menuInfos.length
      const pxNum = 26 * length
      this.secondMenuBtnSBsContentHeight = pxNum
      this.swiperSecond.update()
    },
    // 控制二级菜单的状态的
    togSelectAll (type) {
      if (typeof type === 'boolean') {
        for (const i in this.currMenuInfos) {
          this.currMenuInfos[i].selected = type
        }
      } else {
        for (const i in this.currMenuInfos) {
          this.currMenuInfos[i].selected = !this.currMenuInfos[i].selected
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bmp-second-menus-content {
  padding-top: 14px;
  overflow: hidden;
  .swiper-slide {
    height: 26px !important;
  }
}
</style>
